<template>
  <view class="page">
    <view class="my-info">
      <my-info-item :value="userInfo?.avatar || '/static/image/profile/my-info/default_avatar.svg'" :is-img="true"
        >头像</my-info-item
      >
      <my-info-item :value="userInfo?.nickname || '未填写昵称'">昵称</my-info-item>
      <my-info-item :value="userInfo?.phone ?? '未绑定'">手机号</my-info-item>
      <my-info-item :value="userInfo?.email ?? '未绑定'">邮箱</my-info-item>
      <my-info-item value="修改密码">密码</my-info-item>
    </view>
    <view class="logout" :style="{ paddingBottom: safeArea.bottom + 'px' }">
      <button>退出登录</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import $API from '@/api'
import MyInfoItem from '@/components/my-info-item/index.vue'
import $store from '@/store'
import type { UserInfo } from '@/types/response/user'
import { onMounted, ref } from 'vue'

const userInfo = ref<UserInfo>()
onMounted(async () => {
  const result = await $API.user.getUserInfo()
  if (result.success) {
    userInfo.value = result.data
  }
})

const { safeArea } = $store.app.getSystemParam()
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  background-color: #f5f6fa;
  flex-direction: column;

  .my-info {
    margin-top: 10px;
    background-color: #fff;
  }

  .logout {
    $logout-height: 100rpx;

    button {
      width: 100%;
      height: $logout-height;
      font-size: $logout-height * 0.32;
      border: none;
      color: #ff5f5f;
      background-color: #fff;
      line-height: $logout-height;
    }
  }
}
</style>
